<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../base.jsp" %>
<!-- Select2 -->
<link rel="stylesheet" href="${url }plugins/select2/select2.min.css">
<script src="${url }plugins/select2/select2.full.min.js"></script>
<style>
	.content-wrapper{margin-left: 0px}
	a {
	    text-decoration: underline;
	}
</style>
<script type="text/javascript">
$(function() {
	init();
});
function init(){
	$.ajax({
		type:"POST",
		url: path+'collect/getCollectList',
		success: function(result){
			if(result){
				$("#collectTbody").html("");
				$("#addcollectTbody").html("");
				for(var item in result.result){
					var index = 0;
					for(var i = 0;i<result.result[item].services.length;i++){
						for(var oItem in result.result[item].services[i]){
							if(result.result[item].services[i][oItem].state==1){
								index = parseInt(index)+1;
							}
						}
					}
					if(index>0){
						var appendStr = "<tr><td><a>"+item+"</a></td>";
						appendStr+="<td>"+index+"</td><td><i class='fa fa-check-circle text-green'></i></td>";
						appendStr+="<td>"+result.result[item].os+"</td>";
						appendStr+="<td>OA日志采集</td>";
						appendStr+="<td><a href='' class='fa fa-remove text-red'>删除</a> </td></tr>";
						$("#collectTbody").append(appendStr);
					}else{
						var appendStr = "<tr><td><a>"+item+"</a></td>";
						appendStr+="<td>"+index+"</td><td><i class='fa fa-check-circle text-green'></i></td>";
						appendStr+="<td>"+result.result[item].os+"</td>";
						appendStr+="<td>OA日志采集</td>";
						appendStr+="<td><a href='' class='fa fa-remove text-red' onclick='deleteNode(\""+item+"\",0)'>删除</a> </td></tr>";
						$("#addcollectTbody").append(appendStr);
					}
				}
			}
		}
	}); 
}

function submitAddNewNodeAction(){
	$.ajax({
		cache:false,
		async:false,
		type:"POST",
		url: path
		+"collect/addNewNode",
		data:$('#addNewNodeAction').serialize(),
		success: function(result){
			if(result){
				alert("添加成功");
				$('#myModal').modal('hide');
				$('.modal-backdrop').removeClass('in');
				init();
			}else{
				alert("添加失败");
				$('#myModal').modal('hide');
				$('.modal-backdrop').removeClass('in');
			}
		}
	});
}

function deleteNode(ip,type){
	if(type==0){
		if(confirm('确实要删除吗?')){
			$.ajax({
				cache:false,
				async:false,
				type:"POST",
				url: path+'collect/deleteNode',
				data:{ip:ip},
				success: function(result){
					if(result){
						alert("删除成功");
						init();
					}
				}
			});
		}
	}
}
</script>
<body class="hold-transition skin-blue sidebar-mini">

	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>首页<small></small></h1>
				<ol class="breadcrumb">
					<li><a href="javascript:;"><i class="fa fa-dashboard"></i> 首页</a></li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-xs-12">
						<div class="box">
							<!-- /.box-header -->
							<div class="box-body no-padding">
								<table class="table table-bordered table-hover">
									<tr style="background-color: #f9f9f9;">
										<th>IP</th>
										<th>采集</th>
										<th>状态</th>
										<th>操作系统</th>
										<th>描述</th>
										<th>操作</th>
									</tr>
									<tbody id="collectTbody">
       								 </tbody>
								</table>
							</div>
							<!-- /.box-body -->
						</div>
						<!-- /.box -->
					</div>
				</div>
				
				<div class="row">
					<div class="col-xs-12">
						<div class="box">
							<div class="box-header with-border">
							    <h3 class="box-title">空闲采集节点</h3>
							</div>
							<!-- /.box-header -->
							<div class="box-body table-responsive no-padding">
								<div class="mailbox-controls">
							      <div class="btn-group">
							        <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" ><i class="fa fa-plus"></i>添加空闲节点</button>
							      </div>
							    </div>
								<table class="table table-bordered table-hover">
									<tr style="background-color: #f9f9f9;">
										<th>IP</th>									
										<th>采集</th>
										<th>状态</th>
										<th>操作系统</th>
										<th>描述</th>
										<th>操作</th>
									</tr>
									<tbody id="addcollectTbody">
       								 </tbody>
								</table>
							</div>
							<!-- /.box-body -->
						</div>
						<!-- /.box -->
					</div>
				</div>
			</section>
		</div>
	</div>
	<!-- 模态框（Modal） -->
 <form id="addNewNodeAction">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">
               添加空闲节点
            </h4>
         </div>
         <div class="modal-body">
             <div class="form-group">
			      <label for="name">IP</label>
			      <input type="text" class="form-control" id="ip" name="ip" 
			         placeholder="请输入ip" data-inputmask="'alias': 'ip'" data-mask>
   			</div>
   			<div class="form-group">
			      <label for="name">操作系统</label>
			      <input type="text" class="form-control" id="os" name="os" 
			         placeholder="请输入操作系统">
   			</div>
   			<div class="form-group">
			      <label for="name">描述</label>
			      <input type="text" class="form-control" id="desc"  name="desc"
			         placeholder="请输入描述">
   			</div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary" onclick="submitAddNewNodeAction()">
               提交
            </button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</form>
<script src="${url }plugins/input-mask/jquery.inputmask.js"></script> 
<script src="${url }plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script type="text/javascript">
$("[data-mask]").inputmask();
</script>
</body>